<template>
  <!-- 推荐路由 -->
  <div id="recommend">
    <!-- 轮播图组件 -->
    <Banner :banners="banners"></Banner>
    <div class="content">
      <!-- 头部标题组件 -->
      <NavHead title="热门推荐" @handle-more="handleMoreAndSongList"></NavHead>
      <!-- 歌单展示组件 -->
      <SongListItem
        :song-list="songList"
        @song-list-item-click="songListItemClick"
      ></SongListItem>
      <!-- 新碟上架 -->
      <NavHead title="新碟上架" @handle-more="handleMoreNewDisc"></NavHead>
      <NewDisc
        :disc-list="discList"
        @new-disc-item-click="newDiscItemClick"
      ></NewDisc>
      <!-- 榜单 -->
      <NavHead title="榜单" @handle-more="handleMoreRankingList"></NavHead>
      <Ranking
        :ranking-list="rankingList"
        @ranking-list-pic-click="rankingListPicClick"
      ></Ranking>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  handleBanner,
  handleHotRecommend,
  handleNewDisc,
  handleRanking,
} from "@/network/recommend/recommend";
import Banner from "@/components/banner/Banner.vue";
import NavHead from "@/components/recommendChild/NavHead.vue";
import NewDisc from "@/components/recommendChild/NewDisc.vue";
import Ranking from "@/components/recommendChild/Ranking.vue";
import SongListItem from "@/components/songlistitem/SongListItem.vue";
export default defineComponent({
  name: "Recommend",
  components: {
    Banner,
    NavHead,
    NewDisc,
    Ranking,
    SongListItem,
  },
  setup() {
    // 数据
    let data = reactive({
      banners: [],
      songList: [],
      discList: [
        { key: 1, value: [] },
        { key: 2, value: [] },
      ],
      rankingList: [],
    });
    const router = useRouter();
    const store = useStore();
    let { proxy } = getCurrentInstance();

    // 组件挂载生命周期
    onMounted(() => {
      getBanner();
      getHotRecommend();
      getNewDisc();
      getRankingList();
    });

    // 获取轮播图请求
    let getBanner = async () => {
      const res = await handleBanner();
      data.banners = res.banners;
    };

    // 获取热门推荐请求
    let getHotRecommend = async () => {
      const res = await handleHotRecommend();
      data.songList = res.playlists;
    };

    // 获取新碟请求
    let getNewDisc = async () => {
      const res = await handleNewDisc(0, 10);
      res.weekData.forEach((element, index) => {
        if (index < 5) {
          data.discList[0].value.push(element);
        }

        if (index >= 5 && index < 10) {
          data.discList[1].value.push(element);
        }

        if (index >= 10) {
          return;
        }
      });
    };

    // 获取榜单请求
    let getRankingList = async () => {
      const res = await handleRanking();

      res.list.forEach((ele, index) => {
        if (index < 3) {
          data.rankingList.push(ele);
        }
        if (index >= 3) {
          return;
        }
      });
    };

    // 点击歌单回调
    let songListItemClick = (item) => {
      store.dispatch("saveSongListDetail", item);
      router.push("/playlist");
    };

    // 点击热门推荐更多事件
    let handleMoreAndSongList = () => {
      router.push("/songlist");
    };

    // 点击榜单更多事件
    let handleMoreRankingList = () => {
      router.push("/rankinglist");
    };

    // 排行榜榜单图片点击事件
    let rankingListPicClick = (item) => {
      store.dispatch("saveSongListDetail", item);
      router.push("/playlist");
    };

    // 新碟上架点击更多事件
    let handleMoreNewDisc = () => {
      router.push("/newdisc");
    };

    // 点击新碟上架的组件回调
    let newDiscItemClick = (item) => {
      proxy.$message.show({
        type: "info",
        title: "该内容还未开放",
      });
    };

    return {
      ...toRefs(data),
      songListItemClick,
      handleMoreAndSongList,
      handleMoreRankingList,
      rankingListPicClick,
      handleMoreNewDisc,
      newDiscItemClick,
    };
  },
});
</script>
<style scoped>
.content {
  padding: 0 20px;
  background-color: #fff;
}
</style>
